<template>
	<view>
		<view class="head">
			<view class="line" :animation="animationData">

			</view>
		</view>
		<view class="container">
			<view class="title">
				<view class="left">
					识别结果
				</view>
				<view class="right" @click="instruction">
					说明
				</view>
			</view>
			<view class="list" v-for="(item,index) in result" :key='index'>
				<view class="number">
					{{index+1}}
				</view>
				<view class="words">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				result: ['百度使命', '用科技让复杂的世界更简单', '百度文化'],
				animationData: ''
			};
		},
		onLoad() {

		},
		onShow() {
			this.animation = uni.createAnimation({
				duration: 2000,
				timingFunction: 'linear',
			});
			this.translate()
		},
		methods: {
			instruction() {
				uni.showModal({
					title: '说明',
					content: '该演示为通用文字识别。目前仅支持中英混合的文字语言类型。',
					showCancel: false,
					confirmText: '我知道了'
				})
			},
			translate() {
				let next = true,
					that = this;
				setInterval(function() {
					if (next) {
						that.animation.height(200).step()
						that.animationData = that.animation.export()
						next = !next
					} else {
						that.animation.height(0).step()
						that.animationData = that.animation.export()
						next = !next
					}

				}, 2000)

			}
		}
	}
</script>

<style lang="scss">
	.head {
		height: 200px;
		width: 750upx;
		background-color: lightgrey;

		.line {
			width: 750upx;
			height: 0;
			background: linear-gradient(white, blue);
			opacity: 0.3
		}
	}

	.container {
		width: 750upx;
		padding: 30upx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

		.title {
			width: 690upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.left {
				font-size: $uni-font-size-lg;
			}

			.right {
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				text-align: right;
			}
		}

		.list {
			width: 690upx;
			height: 100upx;
			border: 1upx solid $uni-border-color;
			font-size: $uni-font-size-base;
			margin: 30upx 0;
			line-height: 100upx;
			display: flex;
			flex-direction: row;

			.number {
				width: 100upx;
				height: 100upx;
				text-align: center;
				line-height: 100upx
			}

			.words {
				width: 590upx;
				height: 100upx;
				text-align: left;
				line-height: 100upx;
				color: blue;
			}
		}


	}
</style>
